<template>
  <div class="holding">
    <!-- 工具栏 -->
    <atom-sticky class="tool-sticky" :offset-top="stockList.length ? offsetTool : '12.8vw'">
      <div class="tool">
        <div class="title" v-if="isView">
          {{ isTrackPool ? '跟踪池' : '精选池' }}
        </div>
        <template v-else>
          <div class="icon-btn" v-if="isTrackPool" @click="$emit('goToShowCustom')">
            <svg-icon icon="setting"></svg-icon>跟踪设置
          </div>
          <div class="icon-btn" v-else @click="showHolding = true">
            <svg-icon icon="pie"></svg-icon>持仓分析
          </div>
        </template>
        <div class="toggle" v-if="stockList.length">
          <span class="btn" @click="onModeChange(0)" :class="{ active: mode === 0 }">列表</span>
          <div class="split"></div>
          <span class="btn" @click="onModeChange(1)" :class="{ active: mode === 1 }">卡片</span>
        </div>
      </div>
    </atom-sticky>
    <!-- 列表 -->
    <section v-if="mode === 0">
      <ServicePackStockList
        :detailTableData="stockList"
        :offsetTop="offsetList"
      ></ServicePackStockList>
    </section>
    <!-- 卡片 -->
    <section v-else>
      <TrackingCard
        v-for="(card, index) in signalCards"
        :key="index"
        buttonText="全部信号"
        :hasSubTitle="true"
        :stockInfo="stockList[index]"
        :signals="card"
        :sortTimeType="sortTimeType"
      ></TrackingCard>
    </section>
    <!-- 持仓分析 -->
    <atom-popup v-model="showHolding" round closeable position="bottom">
      <HoldingAnalysis :show.sync="showHolding"></HoldingAnalysis>
    </atom-popup>
  </div>
</template>

<script>
import TrackingCard from '@/components/portfolio/TrackingCard.vue';
import HoldingAnalysis from '@/components/detail/HoldingAnalysis.vue';
import ServicePackStockList from '@/components/servicePack/StockList.vue';

const MODE = {
  LIST: 0,
  CARD: 1,
};

export default {
  components: {
    HoldingAnalysis,
    TrackingCard,
    ServicePackStockList,
  },
  props: {
    offsetTool: {
      type: String,
      default: '0px',
    },
    offsetList: {
      type: String,
      default: '0px',
    },
    activeDate: {
      type: String,
      default: '',
    },
    activeStock: {
      type: String,
      default: '',
    },
    // 是否为持仓记录页
    isView: {
      type: Boolean,
      default: false,
    },
    // 是否为跟踪池
    isTrackPool: {
      type: Boolean,
      default: false,
    },
    stockList: {
      type: Array,
      default: () => [],
    },
    cardList: {
      type: Array,
      default: () => [],
    },
    // 按什么时间排序，默认按交易时间排序
    sortTimeType: {
      type: 'trade_time' | 'push_time',
      default: 'trade_time',
    },
  },
  computed: {
    signalCards() {
      return this.cardList.map(card => (Array.isArray(card) ? card : []));
    },
  },
  data() {
    return {
      showHolding: false,
      mode: MODE.LIST,
      showLoading: false,
    };
  },
  created() {
    this.activeDate && (this.mode = MODE.CARD);
    const parmasMode = +window.getParam('mode');
    const mode = Object.values(MODE).includes(parmasMode) ? parmasMode : MODE.LIST;
    if (this.isView) {
      this.mode = mode;
    }
  },
  methods: {
    onModeChange(mode) {
      this.mode = mode;
      this.$emit('modeChange', mode);
    },
  },
};
</script>

<style lang="less" scoped>
// 吸顶
/deep/.atom-sticky--fixed .tool {
  padding: 0 10px !important;
  background: var(--bg-color-2);
}

section {
  padding-bottom: 20px;
}

.tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-1);
  padding: 16px 0;
  .icon-btn {
    display: flex;
    align-items: center;
    svg {
      margin-right: 4px;
    }
  }
  .title {
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-1);
  }
  .toggle {
    display: flex;
    align-items: center;
  }
  .btn {
    color: var(--text-2);
    &.active {
      color: var(--text-1);
      font-weight: 600;
    }
  }
  .split {
    width: 1px;
    height: 12px;
    background: var(--text-4);
    margin: 0 12px;
  }
}
</style>
